<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 588px;
    top: 220px;
}
.line{
    width: 1px;
    height: 500px;
    position: absolute;
    left: 588px;
    top: 0;
    background-color: blue;
}
</style>
</head>
<body>
    
<button class="btn">走你</button>
<div class="box">box</div>
<span class="line"></span>

<script>
// 运动
// 运动原理：持续改变元素的某个属性（计时器）
// 运动速度：每次改变的量
// 运动停止：到达目标位置并清除计时器

// 匀速运动：
// 运动的速度和频率不变
// 速度：每次改变的量是固定的
// 频率：计时器时间间隔

var btn = document.querySelector('.btn');
var box = document.querySelector('.box');

var timer = null;// 记录计时器id
// var speed = 5;// 运动速度
// var current = 10;// 当前位置
// var target = 588;// 目标位置

// 屏幕刷新率：60hz -> 每秒刷新60次
// 看起来比较顺畅的运动：每秒最少24帧
// 1秒=1000毫秒
// 1000/60 = 16.666667毫秒
// 1000/24 = 41.66667毫秒
// 所以，重复计时器的时间间隔为 16-41 毫秒

btn.onclick = function (){
    // animate(box,'left',10);
    // animate(box,'top',500);
    // animate(box,'width',500);
    // animate(box,'marginLeft',120);
    animate(box,'fontSize',40,1);
}

/**
 * 运动函数：animate
 * 
 * 参数说明：
 * dom 要运动的元素节点
 * attr 要运动的属性
 * target 运动的目标位置
 * speed 运动速度
 * 
 * 功能说明：
 * 1.支持带px单位的属性运动（left top right bottom width margin...）
 */
function animate(dom,attr,target,speed){
    // 速度的默认值
    speed = speed || 5;

    // 获取元素attr属性的当前值
    var current = parseInt( getComputedStyle(dom)[attr] );// '50px' -> 50

    // 判断运动方向
    if (current > target) {
        // 往左运动
        speed = -Math.abs(speed);
    } else {
        // 往右运动
        speed = Math.abs(speed);
    }

    // 先清除计时器，再启动计时器，保证计时器不会叠加
    clearInterval(timer);
    timer = setInterval(function (){
        current += speed;
        // 临界值判断
        // 运动停止条件：剩余运动量 <= 每次的运动量
        if (Math.abs(target - current) <= Math.abs(speed)) {
            // 已到达目标位置
            dom.style[attr] = target + 'px';// 赋值到达目标位置
            clearInterval(timer);// 清除计时器
            console.log( '到达目标位置。。。' );
        }else {
            // 没到达目标位置
            dom.style[attr] = current + 'px';
        }
    },20);
}

</script>
</body>
</html>